<div class="c-wrapper">
    <div class="c-left-wrapper" [ngClass]="{'c-left-wrapper-c': navClose,'c-left-wrapper-o': !navClose}">
        <div class="c-header">
            <img src="assets/img/logo.png" />
            <h3>后台管理系统</h3>
        </div>
        <div class="c-header-profile">
            <div ngbDropdown>
                <img alt="image" class="rounded-circle" [src]="mainData.userData.userAvatar" (click)="avatarReplacement()"/>
                <div class="c-user-profile">
                    <span ngbDropdownToggle>{{mainData.userData.userName}}</span>
                </div>
                <div ngbDropdownMenu  class="dropdown-menu animated fadeIn">
                    <button class="dropdown-item" (click)="userInfo()"><i class="fa  fa-user-circle-o  fa-fw"></i> 个人资料</button>
                    <button class="dropdown-item" (click)="passwordEdit()"><i class="fa  fa-key fa-fw"></i> 修改密码</button>
                    <button class="dropdown-item" (click)="exitSys()"><i class="fa  fa-sign-out fa-fw"></i> 退出系统</button>
                </div>
            </div>
        </div>

        <c-sidebar-menu [data]="mainData.menuData"></c-sidebar-menu>

    </div>

    <div class="c-right-wrapper" [ngClass]="{'c-right-wrapper-c': navClose,'c-right-wrapper-o': !navClose}">
        <div class="c-header">
            <div class="c-title">
                <button class="btn btn-light btn-xs" (click)="toggleNav();" placement="right" [ngbTooltip]="toggleDescTip">
                        <i class="fa fa-dedent fa-fw" [hidden]="navClose"></i>
                        <i class="fa fa-indent fa-fw" [hidden]="!navClose"></i>
                    </button>
                <h3>{{title}}</h3>
            </div>
            <div class="c-tools">
                <ul class="nav nav-pills pull-right">
                    <li class="c-item" (click)="toHome()">
                        <i class="fa fa-home fa-fw"></i> 首页
                    </li>
                    <li class="c-user" ngbDropdown>
                        <div ngbDropdownToggle class="d-inline-block">
                            <img class="rounded-circle" [src]="mainData.userData.userAvatar" />
                            <span>{{mainData.userData.userName}}</span>
                        </div>
                        <div ngbDropdownMenu class="animated fadeIn">
                            <button class="dropdown-item"  (click)="userInfo()"><i class="fa  fa-user-circle-o  fa-fw"></i> 个人资料</button>
                            <button class="dropdown-item"  (click)="passwordEdit()"><i class="fa  fa-key fa-fw"></i> 修改密码</button>
                            <button class="dropdown-item"  (click)="exitSys()"><i class="fa  fa-sign-out fa-fw"></i> 退出系统</button>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="c-content-wrapper" c-custom-scrollbar>
            <div class="c-content">
                 <router-outlet></router-outlet>
            </div>
        </div>
    </div>
</div>
